import React, { useMemo, useState } from 'react'

function calcNumber(count) {
  console.log('calcNumber Re Calculate')
  let total = 0
  for (let i = 0; i <= count; i++) {
    total += i
  }
  return total
}

export default function MemoHoosDemo01() {
  const [count, setCount] = useState(10)
  const [show, setShow] = useState(true)

  // const total = calcNumber(count)
  const total = useMemo(() => {
    return calcNumber(count)
  }, [count])

  return (
    <div>
      <h2>Calculate the sum of the numbers: {total}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
      <button onClick={e => setShow(!show)}>Show Switch</button>
    </div>
  )
}
